<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            max-width:1440px;
            background: green;
        }
        /* 检测当前浏览器屏幕宽度，如果小于500px的时候，背景颜色就换成红色 */
        /* @media 设备的类型 关键字 (判断的条件){css声明} */
        @media all and (max-width:500px){
            html{
                background:red;
            }  
        }
        /* 检测当前浏览器平库宽度，如果大于500px、小于800px的时候,背景颜色换成yellow */
        @media all and (min-width:501px) and (max-width:800px){
            html{
                background: yellow
            }
        }
        @media all and (min-width:801px){
            html{
                background: green
            }
        }
    </style>
</head>
<body>
    
</body>
</html>
<!-- 
    媒体查询的使用: 媒体查询只是一个工具(真实的属性)，通过检测不同设备的特性从而设置不同的css样式
    媒体查询的写法: @media 设备的类型 关键字 (判断的条件){css声明}
        - @media 媒体 使用的就是媒体查询
        - 设备的类型 电脑、手机、pad、打印机 all screen(屏幕)
        - 关键字 and (only、not)
        - (判断条件) 分辨率，尺寸，颜色 min-width/max-width
        - css声明
    媒体查询需要注意的点:
        - 媒体查询建议写在css样式表的最下方
        - 书写媒体查询要加上空格
        - 媒体查询如果有多个条件的时候，加一个and关键字继续书写媒体查询
        - 由于市场上的设备较多，设置媒体查询的时候 500~800 510px ~ 810px
 -->